<!-- 1、then之后可以再次then,所以需要再一次调用MyPromise实例 -->
<script>
  function asyncFunc(callback) {
    if (typeof queueMicrotask === 'function') {
      queueMicrotask(callback)
    } else if (typeof MutationObserver === 'function') {
      const observer = new MutationObserver(callback)
      observer.observe(document.body, {
        childList: true,
      })
    } else if (typeof setTimeout === 'function') {
      setTimeout(callback)
    }
  }
   // 处理返回值
      function resolvePromise(promise2, x, resolve, reject) {
        if(promise2===x) {
            return reject(new TypeError('Chaining cycle detected for promise'))
        }
        if(x instanceof MyPromise){
          x.then(res=>console.log(res),res=>reject(res))
        }else{
          resolve(x)
        }
      }
  const PENDING = 'pending'
  const FULFILLED = 'fulfilled'
  const REJECTED = 'rejected'
  class MyPromise {
    constructor(executor) {
      this.state = PENDING
      this.result = undefined
      this.resolveCallbacks = []
      this.rejectCallbacks = []
      const resolve = (result) => {
        if (this.state === PENDING) {
          this.state = FULFILLED
          this.result = result
          this.resolveCallbacks.forEach((callback) => {
            callback(result)
          })
        }
      }
      const reject = (result) => {
        if (this.state === PENDING) {
          this.state = REJECTED
          this.result = result
          this.rejectCallbacks.forEach((callback) => {
            callback(result)
          })
        }
      }
      executor(resolve, reject)
    }

    then(onFulfilled, onRejected) {
      onFulfilled =
        typeof onFulfilled === 'function' ? onFulfilled : (value) => value
      onRejected =
        typeof onRejected === 'function'
          ? onRejected
          : (reason) => {
              throw reason
            }

      const promise2 = new MyPromise((resolve, reject) => {
        if (this.state === FULFILLED) {
          asyncFunc(() => {
            try {
              // 此处的x是第一次return的值
              const x = onFulfilled(this.result)
              resolvePromise(promise2,x,resolve,reject)
            } catch (e) {
              reject(e)
            }
          })
        }
        if (this.state === REJECTED) {
          asyncFunc(() => {
            try {
              const x = onRejected(this.result)
              resolvePromise(promise2,x,resolve,reject)
            } catch (e) {
              reject(e)
            }
          })
        }
        if (this.state === PENDING) {
          this.resolveCallbacks.push(() => {
            asyncFunc(() => {
              try {
                const x = onFulfilled(this.result)
                resolvePromise(promise2,x,resolve,reject)
              } catch (e) {
                reject(e)
              }
            })
          })
          this.rejectCallbacks.push(() => {
            asyncFunc(() => {
              try{
                const x = onRejected(this.result)
                resolvePromise(promise2,x,resolve,reject)
              }catch(e) {
                reject(e)

              }
              
            })
          })
        }
      })

      return promise2
    }
  }

  // const p1 = new MyPromise((resolve, reject) => {
  //   resolve(1)
  // })
  // const p2 = p1.then(
  //   (res) => {
  //     console.log(res)
  //     // return 2 // 普通类型
  //     return new MyPromise((resolve, reject) => {
  //       resolve(2)
  //     }) // promise类型
  //     // return p2 // 循环引用
  //   }
  // )
  // p2.then((res)=>{
  //   console.log(res)
  // })

  console.log('top')
  const p = new MyPromise(resolve => resolve(1));

p.then(value => {
  console.log(value); // 1
  return 2; // 普通值
}).then(value => {
  console.log(value); // 2
  return new MyPromise(resolve =>{
    setTimeout(()=>{
      resolve(3)
    })
     
  }); // Promise
}).then(value => {
  console.log(value); // 3
})
  console.log('bottom')
</script>
